<template>
	<div>
		<span class="left-align"><h4>公众监督数据详情</h4></span>
	</div>
  <div>
<el-form :model="form" label-width="auto" style="max-width: 100vw">
	<el-form-item>
	  <el-row :gutter="100"  style="width: 100%;">
			<el-col :span="16">
			  <el-table :data="tableData"  :show-header="false" border style="flex; width: 100%">
				<el-table-column prop="attribute" label="属性" ></el-table-column>
				<el-table-column label="属性">
					<template #default="scope">
					  <el-tag class="eltag"
						v-for="(tag, index) in scope.row.tags"
						:key="index"
						:type="tag.type"
					  >
						{{ tag.text }}
					  </el-tag>
					</template>
				</el-table-column>
			  </el-table>
			</el-col>
			
			<el-button @click="handleReturn" type="primary" plain>返回</el-button>
		</el-row>	
	</el-form-item>

</el-form>


  </div>
</template>

<script setup>
import { computed, ref, reactive,onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router';
import axios from '@/axios';
const router=useRouter()
const route=useRoute()
const routequery=route.query
const tokenValue=localStorage.getItem('token')


const tableData = ref([
  { tags: [{ type: 'primary', text: routequery.id }],
	attribute: '公众监督反馈信息编号'},
  { tags: [{ type: 'primary', text: routequery.svName },
		   { type: 'primary', text:	routequery.svGender },
		   { type: 'primary', text: routequery.svBirthday }],
	attribute: '反馈者信息'},
  { tags: [{ type: 'primary', text:	routequery.svPhone  }],
	attribute: '反馈者联系电话'},
  { tags: [{ type: 'primary', text:	routequery.province  },
		   { type: 'primary', text: routequery.city },
		   { type: 'primary', text: routequery.address }],
	attribute: '反馈信息所在地址'},
  { tags: [{ type: 'primary', text:	routequery.content  }],
	attribute: '反馈信息描述'},
  { tags: [{ type: 'primary', text:	routequery.aqi  },
		   { type: 'primary', text: routequery.aqiChinese }],
	attribute: '预估等级'},
  { tags: [{ type: 'primary', text:	routequery.date },
		   { type: 'primary', text:	routequery.time }],
	attribute: '反馈日期时间'},		   
]);
const handleReturn=()=>{
	router.push('/admin/svDataManage/svDataList')
	
}
</script>

<style scoped>
.left-align {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.eltag{
	margin-left: 10px;
}
</style>